<template>
  <div class="get-gift">
    <!-- 选择地址 -->
    <div class="get-gift-address" @click="checkAddress">
      <div class="get-gift-address-cont">
        <!-- 地址icon -->
        <div class="get-gift-address-cont-icon"><img src="https://img.wifenxiao.com/h5-wfx/images/order/adreess_log.png" alt=""></div>
        <!-- 地址内容 -->
        <div class="get-gift-address-cont-msg">
          <div class="yes" v-if="addressMsg.address_id">
            <p><span>{{addressMsg.name}}</span><span>{{addressMsg.mobile}}</span></p>
            <p>{{addressMsg.province}}{{addressMsg.city}}{{addressMsg.area}}{{addressMsg.town}}{{addressMsg.address}}</p>
          </div>
          <div class="no" v-else>请选择地址</div>
        </div>
      </div>
      <!-- 地址icon -->
      <div class="get-gift-address-right">
        <i class="icon-right"></i>
      </div>
      <!-- 底部边框线 -->
      <div class="get-gift-address-border"></div>
    </div>
    <!-- 商品展示 -->
    <div class="get-gift-good">
      <!-- 来自小伙伴的礼盒 -->
      <div class="banner"><img src="https://img.wifenxiao.com/h5-wfx/images/gift/gift_hb_banner.png" alt=""></div>
      <!-- 商品信息 -->
      <div class="get-gift-good-item">
        <div class="get-gift-good-item-left">
          <img :src="info.is_compress == 1 ? info.img_src + '480x480':info.img_src" alt="">
        </div>
        <div class="get-gift-good-item-right">
          <div class="title">{{info.item_title}}</div>
          <div class="address">
            <p><span style="margin-right: 5px">{{info.receiver_name}}</span><span>{{info.receiver_mobile}}</span></p>
            <p>{{info.receiver_address}}</p>
          </div>
          <div class="priopt">
            <div class="gift-num">
              <span>剩余<span class="num">{{info.gift_num}}</span>份</span>
              <span>共<span class="num">{{info.num}}</span>份</span>
            </div>
            <div class="btn">
              <div class="btn-buy red-gra-btn" @click="navToCollcateDetail(info.item_id)">查看商品</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 验证码填写 -->
    <div class="get-gift-code" v-if="isCheckCode == 1">
      <span>验证码</span>
      <input type="text" v-model="code" placeholder="请填写验证码" @blur="getCode">
    </div>
    <!-- 按钮区域控制 -->
    <div class="get-gift-btn">
      <div class="get-gift-btn-item2" @click="getGiftBtn">领礼物</div>
      <div class="get-gift-btn-item2 red-gra-btn" @click="navToCollcateDetail(info.item_id)">我也送</div>
    </div>

    <!-- 没有填写验证码提示弹窗 领取成功的提示弹窗 -->
    <van-overlay :show="noCodePopShow" :z-index="99">
      <div class="gift-pop-wrapper" @click.stop>
        <div class="gift-pop-wrapper-img"><img src="https://img.wifenxiao.com/h5-wfx/images/gift/gift_pop_img.png" alt=""></div>
        <div class="gift-pop-wrapper-cont" v-if="isSuccess === 0">{{codeMsg}}</div>
        <div class="gift-pop-wrapper-cont success" v-if="isSuccess === 1">恭喜你领取成功</div>
        <div class="gift-pop-wrapper-text" v-if="isSuccess === 1">
          <textarea v-model="popMsg"></textarea>
        </div>
        <div class="gift-pop-wrapper-btn">
          <div class="gift-pop-wrapper-btn-item red-gra-btn" v-if="isSuccess === 1" @click="sureGetGift">确认领取</div>
          <div class="gift-pop-wrapper-btn-item red-gra-btn" v-else @click="navToCollcateDetail(info.item_id)">不气馁自己买</div>
          <div class="gift-pop-wrapper-btn-item red-border-btn" @click="navToCollcateLog">查看派送记录</div>
        </div>
      </div>
    </van-overlay>
    <address-dialog :visible.sync="addressVisible" @selectAddress="selectAddress"></address-dialog>
  </div>
</template>

<script>
  /*
   * @Author: zhangmeng
   * @Date: 2020-06-10 13:46:53
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-08-17 13:47:48
   */
  import Vue from 'vue'
  import addressDialog from '@/components/addressDialog'
  import { getGiftFetch, setGiftAddress, setGiftMessage } from '@/api/item/activity.js'
  import { Overlay } from 'vant'

  Vue.use(Overlay)
  export default Vue.extend({
    components: {
      addressDialog
    },
    data() {
      return {
        popMsg: '谢谢你的礼物',
        addressMsg: {},
        info: {},
        code: '',
        codeMsg: '',
        isCheckCode: 0,
        isSuccess: 0,
        noCodePopShow: false,
        addressVisible: false,
        orderId: 0,
        giftGetId: 0
      }
    },
    mounted() {
      const sendData = {}
      sendData.id = this.$route.query.id
      this.getGiftFetchFun(sendData)
    },
    methods: {
      /**
       * 查看商品
       */
      navToCollcateDetail(id) {
        this.$JumpName(this, 'item-detail', { detailId: id })
      },

      /**
       * 点击选择地址
       */
      checkAddress() {
        this.addressVisible = true
      },

      getCode() {
        window.scroll(0, 0)
      },

      /**
       * 选择地址关闭弹出层
       */
      selectAddress(val) {
        // console.log(val)
        this.addressMsg = val
      },

      /**
       * 点击领取礼物
       */
      getGiftBtn() {
        const sendData = {}
        sendData.id = this.orderId
        sendData.address_id = this.addressMsg.address_id
        if (Number(this.addressMsg.address_id) > 0) {
          // console.log('安全的')
        } else {
          this.$Error('请选择地址')
          return
        }
        if (this.isCheckCode == 1) {
          if (this.code) {
            sendData.code = this.code
          } else {
            this.$Error('请填写验证码')
            return
          }
        }
  
        this.setGiftAddressFun(sendData)
      },

      /**
       * 点击确认领取
       */
      sureGetGift() {
        const sendData = {}
        sendData.id = this.orderId
        sendData.gift_get_id = this.giftGetId
        sendData.message = this.popMsg
        this.setGiftMessageFun(sendData)
      },

      /**
       * 获取礼物详情
       */
      getGiftFetchFun(sendData) {
        getGiftFetch(sendData).then(res => {
          if (res.status === 1) {
            // console.log(res)
            const addr = res.data.address[0]
            addr && (this.addressMsg = addr)
            this.info = res.data.info
            this.isCheckCode = res.data.is_ckeckcode_gift
            this.orderId = res.data.id
          } else {
            this.$Error(res.msg)
          }
        })
      },

      /**
       * 领取礼物操作数据请求
       */
      setGiftAddressFun(sendData) {
        setGiftAddress(sendData).then(res => {
          if (res.status === 1) {
            this.noCodePopShow = true
            this.isSuccess = res.status
            this.giftGetId = res.data.id
          } else {
            this.codeMsg = res.msg
            this.noCodePopShow = true
            this.isSuccess = res.status
          }
        })
      },

      /**
       * 确认收礼
       */
      setGiftMessageFun(sendData) {
        setGiftMessage(sendData).then(res => {
          if (res.status === 1) {
            this.noCodePopShow = false
            this.$Error('恭喜你领取成功')
            // setTimeout(() => {
            //   this.navToCollcateLog()
            // }, 1000)
            // TODO 小程序跳转处理
              setTimeout(() => {
                this.navToCollcateLog()
              }, 1000)
          } else {
            this.$Error(res.msg)
          }
        })
      },

      /**
       * 查看派送记录
       */
      navToCollcateLog() {
        this.$JumpName(this, 'gift-detail', { id: this.orderId, type: 2 })
      }
    }
  })

</script>

<style lang="scss">
  @import 'src/styles/variables.scss';
  @import 'src/styles/mixin';

  .get-gift {
    width: 100%;
    padding: 25px 25px 125px;
    box-sizing: border-box;

    &-address {
      width: 100%;
      padding: 25px;
      background-color: #fff;
      position: relative;
      border-radius: 20px;

      &-cont {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 40px 40px 40px 0;

        &-icon {
          width: 31px;
          height: 38px;
          position: absolute;
          top: 50%;
          left: 25px;
          transform: translate(0, -50%);

          img {
            width: 100%;
            height: 100%;
          }
        }

        &-msg {
          padding-left: 60px;

          .yes {
            font-size: 28px;

            p {
              &:first-child {
                font-weight: bold;
                margin-bottom: 20px;

                span {
                  &:first-child {
                    margin-right: 10px;
                  }
                }
              }

              &:last-child {
                color: #999;
                font-size: 26px;
              }
            }
          }

          .no {
            font-size: 28px;
            line-height: 40px;
          }
        }
      }

      &-right {
        position: absolute;
        top: 50%;
        right: 25px;
        transform: translate(0, -50%);
      }

      &-border {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        width: 100%;
        background: url('https://img.wifenxiao.com/h5-wfx/images/order/address_border.png') repeat-x;
        background-size: 160px 4px;
      }
    }

    &-good {
      margin: 20px 0px;
      background-color: #fff;
      border-radius: 20px;
      box-sizing: border-box;

      .banner {
        width: 100%;
        height: 75px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        padding: 25px;
        box-sizing: border-box;

        &-left {
          width: 186px;
          height: 186px;
          border-radius: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &-right {
          width: 69%;
          flex: 1;
          color: #333;
          margin-left: 20px;
          position: relative;

          .title {
            font-weight: bold;
            margin-bottom: 18px;
            @include lineClamp(24px, 1.4, 1);
          }

          .address {
            color: #999;
            font-size: 22px;

            p {
              margin-bottom: 6px;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }

          .priopt {
            position: absolute;
            bottom: 0;
            width: 100%;

            .gift-num {
              font-size: 24px;
              font-weight: 500;

              .num {
                color: #F20B22;
                margin: 0 4px;
              }
            }

            .btn {
              position: absolute;
              top: 20%;
              right: 0px;
              transform: translate(0, -50%);

              &-buy {
                color: #fff;
                line-height: 24px;
                font-size: 22px;
                font-weight: 500;
                padding: 15px 26px;
                border-radius: 26px;
              }
            }
          }
        }
      }
    }

    &-code {
      width: 100%;
      background-color: #fff;
      padding: 33px 25px;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 28px;
      display: flex;
      align-items: center;
      span {
        color: #191919;
        font-weight: 500;
        line-height: 40px;
      }

      input {
        max-width: 85%;
        height: 40px;
        margin-left: 20px;
      }
    }

    &-btn {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 12;
      background: #fff;
      padding: 10px 25px;
      text-align: center;
      box-sizing: border-box;

      &-item2 {
        width: calc(50% - 30px);
        display: inline-block;
        color: #fff;
        line-height: 28px;
        font-size: 28px;
        font-weight: 500;
        padding: 27px 26px;
        border-radius: 38px;
        text-align: center;

        &:first-child {
          margin-right: 15px;
          @include gradient(right, #FFAD00, #FF8901);
        }

        &:last-child {
          margin-left: 15px;
        }
      }
    }
  }

  .gift-pop-wrapper {
    background-color: #fff;
    border-radius: 20px;
    width: 600px;
    position: fixed;
    top: 50%;
    left: 75px;
    transform: translate(0, -50%);
    padding: 153px 50px 50px;
    box-sizing: border-box;

    &-img {
      width: 460px;
      height: 205px;
      position: absolute;
      top: -103px;
      left: 70px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-cont {
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 32px;
      margin-bottom: 70px;
      &.success {
          margin-bottom: 30px;
      }
    }

    &-text {
        margin-bottom: 30px;
      textarea {
        width: 100%;
        height: 190px;
        border: 1px solid #EDEDED;
        border-radius: 5px;
        padding: 20px;
        resize: none;
      }
    }

    &-btn {
      text-align: center;

      &-item {
        color: #fff;
        line-height: 86px;
        font-size: 28px;
        font-weight: 500;
        border-radius: 50px;
        margin-bottom: 30px;

        &:last-child {
          color: #E90104;
          margin-bottom: 0;
        }
      }
    }
  }

</style>
